<template>
  <div class="registered">
    <!-- <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    /> -->
    <img src="https://www.pmdaniu.com/storages/85894/de8ed605c628e9854b208f2fdb1c3254-40104/images/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/u7309.svg" alt="">
    <div class="regis">
      <van-form @submit="onSubmit">
        <van-field
          v-model="phone"
          name="手机号"
          label="手机号:"
          placeholder="请填写手机号"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码:"
          placeholder="请填写密码"
        />
        <van-field
          v-model="code"
          name="code"
          label="验证码:"
          placeholder="请输入验证码"
        />
        <van-button class="getCode" type="default">
          <img src="" alt="">
        </van-button>
        <van-checkbox class="agree" v-model="checked"  icon-size="15px">
          已阅读并同意《
          <router-link class="agreement" to="/agreement">用户服务协议</router-link>
          》
        </van-checkbox>
        <div style="margin: 16px;">
          <van-button color="linear-gradient(to left, #ff6034, #ee0a24)" round block type="info" native-type="submit">注册</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import Register from '@/utils/register'
export default {
  name: 'Registered',
  data () {
    return {
      phone: '',
      password: '',
      code: '',
      checked: false
    }
  },
  methods: {
    // 点击，返回上一页
    onClickLeft () {
      this.$router.back() // 编程式导航
    },
    onSubmit (values) {
      Register(this.checked, this.phone, this.password, this.code)
      // console.log('submit', Register)
    }
  }
}
</script>

<style lang="less" scoped>
  /deep/.van-nav-bar__text{
    color: red;
  }
  .registered{
    img{
      display: block;
      margin: 40px auto;
    }
    .forget{
      display: block;
      float: right;
      font-size: 12px;
      color: #000;
      text-decoration: none;
      margin: 20px;
    }
    .create{
      display: block;
      width: 80px;
      height: 30px;
      margin: 0 auto;
      text-align: center;
      font-size: 15px;
      text-decoration: none;
      color: #FC7A77;
    }
    .regis{
      position: relative;
      text-align: center;
      .getCode{
        position: absolute;
        right: 0;
        top: 34%;
        width: 30%;
      }
      img{
        width: 100px;
      }
      .agree{
      font-size: 15px;
      display: flex;
      justify-content: center;
      margin: 30px auto;
        .agreement{
          color: #3498DB;
        }
      }
    }
  }
</style>
